<!--  -->
<template>
  <div class="">
    <!-- <div class="myMoney classify">
              <div class="recharge one">
                <div class="money">
                  总用户数
                  <span class="biao1">年</span>
                </div>
                <div class="wire"></div>
                <div class="datapresentation">
                  <span>{{zongrenshu}}人</span>
                </div>
              </div>
              <div class="recharge tow">
                <div class="money">
                  昨日新增用户
                  <span class="biao2">日</span>
                </div>
                <div class="wire"></div>
                <div class="datapresentation">
                  <div>
                    <span>{{zuorixingzen}}人</span>
                  </div>
                </div>
              </div>
              <div class="recharge three">
                <div class="money">
                  今日新增用户数
                  <span class="biao3">日</span>
                </div>
                <div class="wire"></div>
                <div class="datapresentation">
                  <span>{{jinrixinzen}}人</span>
                </div>
              </div>
            </div> -->

    <div class="block searchBox">
      <el-col :span="24" class="operation">
        <div class="block">
          <el-input
            v-model="inputName"
            placeholder="请输入账号名"
            class="userNameField"
          ></el-input>
          <!-- <el-date-picker
                    class="timetable"
                    v-model="value2"
                    type="daterange"
                    align="right"
                    unlink-panels
                    @change="timeChange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                    </el-date-picker> -->
          <el-select class="xlk" v-model="userLevel" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </el-col>
    </div>
    <!-- <template>
      <div class="sort">
        <el-radio-group v-model="sort" @change="Update" :size="sortsize">
          <el-radio-button label="">默认排序</el-radio-button>
          <el-radio-button label="-chongzhijine">充值最多</el-radio-button>
          <el-radio-button label="-xiaofei">消费最多</el-radio-button>
          <el-radio-button label="-yue">余额最多</el-radio-button>
        </el-radio-group>
      </div>
    </template> -->
    <el-col :span="24" class="exhibition">
      <div class="Thelistshows">
        <el-table :data="listData" stripe style="width: 100%">
                    <el-table-column  label="序号" min-width="8%" type="index">
          </el-table-column>
          <el-table-column prop="username" label="账户名" min-width="15%">
            <template slot-scope="scope" >{{scope.row.username.slice(0,11) }}</template>
          </el-table-column>
          <el-table-column prop="pay_all" label="账户充值" min-width="10%">
            <template slot-scope="scope" >{{scope.row.pay_all }}</template>
          </el-table-column>
          <el-table-column prop="consume_all" label="账户消费" min-width="10%">
            <template slot-scope="scope" >{{scope.row.consume_all }}</template>
          </el-table-column>
          <el-table-column prop="balance" label="账户余额" min-width="10%">
            <template slot-scope="scope" >{{scope.row.balance }}</template>
          </el-table-column>
          <el-table-column label="上次登录时间" min-width="25%">
            <template slot-scope="scope">
              <span>{{ scope.row.last_login.replace('T', ' ').slice(0,19)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="is_active" label="状态" min-width="10%">
            <template slot-scope="scope">
              <div v-if="scope.row.is_active == false" class="underLine">
                <span class="blockUp">
                  已停用
                </span>
              </div>
              <div v-else class="startUsing">已启用</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" min-width="20%">
            <template slot-scope="operate">
              <el-tooltip
                class="item"
                effect="dark"
                :content="operate.row.is_active ? '停用' : '启用'"
                placement="top-start"
              >
                <i
                  class="el-icon-video-play ActionIcon"
                  @click="
                    startUsing(operate.row.is_active, operate.row.username,operate.row.id)
                  "
                  v-if="operate.row.is_active == false"
                ></i>
                <i
                  class="el-icon-remove-outline ActionIcon"
                  @click="
                    forbidden(operate.row.is_active, operate.row.username,operate.row.id)
                  "
                  v-else
                ></i>
              </el-tooltip>
            </template>
            <template>
              <i class="el-icon-edit-outline ActionIcon"></i>
              <i class="el-icon-postcard ActionIcon"></i>
            </template>
          </el-table-column>
            <template slot="empty">
              <img class="data-pic" src="@/assets/abbdd35b6e88fafd24e25f2d37450ad.png" alt="" />
            </template>
        </el-table>
      </div>
      <!-- 移动端 -->
      <div class="Foldingbar">
        <el-collapse accordion>
          <el-collapse-item v-for="item in listData" :key="item.id">
            <template slot="title">
              <span>用户名: &nbsp;{{ item.username }}</span>
              <span style="margin-left: 58px">
                <span v-if="item.is_active == false" class="blockUp">
                  状态: &nbsp;已禁用
                </span>
                <span v-else class="startUsing">
                  状态: &nbsp;已启用
                </span>
              </span>
            </template>
            <div>账户充值: &nbsp;{{ item.pay_all}}</div>
            <div>账户消费: &nbsp;{{ item.consume_all}}</div>
            <div>账户余额: &nbsp;{{ item.balance}}</div>
            <div>
              创建时间: &nbsp;
              <template>
                <span>{{ item.last_login}}</span>
              </template>
            </div>
            <div class="operatingButton">
              <div v-if="item.is_active == false">
                操作: &nbsp;
                <i
                  class="el-icon-video-play ActionIcon"
                  @click="startUsing(operate.row.is_active, operate.row.username,operate.row.id)"
                ></i>
              </div>
              <div v-else>
                操作: &nbsp;
                <i
                  class="el-icon-remove-outline ActionIcon"
                  @click="forbidden(operate.row.is_active, operate.row.username,operate.row.id)"
                ></i>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="paging">
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage4"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import moment, { locales } from "moment";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      inputName:'',
      account_name:'',
      listData:[],
      page_index:1,
      page_cnt:10,
      more_then_days:'',
      sort: "",
      currentPage4: 1,
      username: "",
      newVal: "",
      oldVal: "",
      total: 0,
      catalog: 10,
      zuorixingzen: 0,
      jinrixinzen: 0,
      jinrixinzen: 0,
      zhuangtai1: "",
      userNamept: "",
      CommissionRatio: "",
      userLevel: "",
      centerDialogVisible1: false,
      AddRegularUsers: false,
      qxyhm: "",
      yonhuming1: "",
      mima: "",
      chongfumima: "",
      value: "",
      options: [
        {
          value: "7",
          label: "超过7天未登录"
        },
        {
          value: "14",
          label: "超过14天未登录"
        },
        {
          value: "30",
          label: "超过30天未登录"
        },
        {
          value: "60",
          label: "超过60天未登录"
        },
        {
          value: "90",
          label: "超过90天未登录"
        }
      ],
      value: "",
      loding:false,
      sortsize:"",
      searchTime:[]
    };
  },
  filters:{
    numFilter(value){
      let val=''
      if(!isNaN(value) && value !=''){
        if(value %1==0 && value!=0){//整数
          val=value+".00"
        }
        else if(value==0){
          val='0'
        }
        else{//小数
          val=parseFloat(value).toFixed(2)
        }
      }else{
        val='0'
      }
      return val
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    searchTime(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal == null) {
        this.searchTime = [];
      }
    }
  },
  //方法集合
  methods: {
    //一页显示多少条
    async handleSizeChange(val) {
      this.page_cnt=val,
      this.sort_by=3;
      this.Update();
    },
    //跳到第几页
    handleCurrentChange(val) {
     this.page_index=val
     this.sort_by=3;
     this.Update();
    },
    startUsing(is_active, username,id) {
      this.$confirm("此操作将启用该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: 'myClass'
      })
        .then(() => {
          this.id=id
          this.is_active=!is_active;
          this.username=username;
          this.operate();
          this.$message({
            type: "success",
            message: "启用成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消启用!"
          });
        });
    },
    forbidden(is_active, username,id) {
      this.$confirm("此操作将停用该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.id=id
          this.is_active = !is_active;
          this.username = username;
          this.operate();
          this.$message({
            type: "success",
            message: "停用成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消停用!"
          });
        });
    },
    // 启用和停用接口
    async operate() {
      const [err, res] = await this.$http.request({
        url: "/activeUser",
        method: "POST",
        data: {
          username: this.username,
          is_active: this.is_active,
          user_id:this.id,
        }
      });
      if (err) return;
      this.Update();
    },
    EditButton(yonhuming, fanyongbili, quanxian) {
      this.centerDialogVisible1 = true;
      this.qxyhm = yonhuming;
      this.CommissionRatio = fanyongbili;
      this.userLevel = quanxian.toString();
    },
    //静默用户接口
    async Update() {
      let data = {
        more_then_days:this.more_then_days,
        page_index:this.page_index,
        page_cnt:this.page_cnt,
        account_name:this.account_name
      };
      // this.sort ? (data.paixu = this.sort) : null;
      const [err, res] = await this.$http.request({
        url: "/silenceUser",
        method: "GET",
        data
      });
      if (err) return;
      console.log(res.data.data);
      this.listData=res.data.data.data_list
      this.total=res.data.data.data_cnt
      // this.loding = true
    },
    async addUsers(yonhuming1, mima, chongfumima) {
      console.log(yonhuming1);
      this.yonhuming = yonhuming1;
      this.mima = mima;
      this.chongfumima = chongfumima;
      console.log(yonhuming1);
      if (this.yonhuming == "") {
        this.$message({
          showClose: true,
          message: "账号名称不能为空",
          type: "error",
          duration: 1800
        });
        return;
      }
      if (!/^1[34578]\d{9}$/.test(this.yonhuming)) {
        this.$message({
          showClose: true,
          message: "请填写正确的手机号",
          type: "error",
          duration: 1800
        });
        return;
      }
      if (this.mima == "") {
        this.$message({
          showClose: true,
          message: "用户密码不能为空",
          type: "error",
          duration: 1800
        });
        return;
      }
      if (this.mima.length < "6") {
        this.$message({
          showClose: true,
          message: "用户密码小于6位数",
          type: "error",
          duration: 1800
        });
        return;
      }
      if (this.chongfumima == "") {
        this.$message({
          showClose: true,
          message: "确认密码不能为空",
          type: "error",
          duration: 1800
        });
        return;
      }
      if (this.chongfumima.length < "6") {
        this.$message({
          showClose: true,
          message: "确认密码小于6位数",
          type: "error",
          duration: 1800
        });
        return;
      }
      if (this.chongfumima !== this.mima) {
        this.$message({
          showClose: true,
          message: "2次密码不一样",
          type: "error",
          duration: 1800
        });
        return;
      }
      this.addUsers1();
    },
    async addUsers1() {
      const [err, res] = await this.$http.request({
        url: "tianjiayonghu/",
        method: "POST",
        data: {
          yonhuming: this.yonhuming,
          mima: this.mima,
          chongfumima: this.chongfumima
        }
      });
      if (err) return;
    },
    //点击搜索触发
    search() {
      this.begin_time=this.searchTime[0],
      this.end_time=this.searchTime[1],
      this.account_name=this.inputName,
      this.more_then_days=this.userLevel
      this.Update();
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if(navigator.userAgent.match(/(iPhone|iPad|Android|ios)/i)){
      this.sortsize = 'small'
    }else{
      this.sortsize = 'medium'
    }
    this.Update();
    // this.timeChange();
  },
};
</script>
<style scoped lang="stylus">
@media only screen and (max-width: 750px){
    .block .xlk{
        margin-top: 20px !important;
        margin-left: 15px;
        width : 210px;
    }
}
@import '../domesticconsumer.styl'
</style>
